<template>
    <div class="refund-list">
        <el-form ref="searchForm" class="search-block" :model="listQuery" label-position="left" label-width="110px">
            <el-row :gutter="50">
                <!--<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
                    <el-form-item label="商品款号：" prop="goodsSn">
                        <el-input @keyup.enter.native="search" v-model="listQuery.goodsSn" placeholder="商品款号"
                                  maxlength="50" clearable></el-input>
                    </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
                    <el-form-item label="商品名称：" prop="goodsName">
                        <el-input @keyup.enter.native="search" v-model="listQuery.goodsName" placeholder="商品名称" maxlength="60" clearable></el-input>
                    </el-form-item>
                </el-col>-->
                <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
                    <el-form-item label="SKU：" prop="skuCode">
                        <el-input @keyup.enter.native="search" v-model="listQuery.skuCode" placeholder="SKU" maxlength="50" clearable></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-form-item label="" class="btn-item">
                <el-button type="primary" size="mini" icon="el-icon-search" plain @click="search">搜索</el-button>
                <span class="btn-reset" @click="resetForm('searchForm')">清空搜索条件</span>
            </el-form-item>
        </el-form>
        <el-table :data="list" v-loading="listLoading" header-row-class-name="table-header" element-loading-text="给我一点时间" border highlight-current-row>
            <el-table-column align="center" label="商品名称" prop="goodsName" min-width="100"></el-table-column>
            <el-table-column align="center" label="商品款号" prop="goodsSn" min-width="100"></el-table-column>
            <el-table-column align="center" label="SKU" prop="skuCode" min-width="100"></el-table-column>
            <el-table-column align="center" label="数量" prop="number" min-width="100"></el-table-column>
            <el-table-column align="center" label="总金额" prop="totalAmount" min-width="100"></el-table-column>
        </el-table>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="listQuery.pageNum"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="listQuery.pageSize"
                background
                layout="total, sizes, prev, pager, next, jumper"
                :total="listTotal">
        </el-pagination>
    </div>
</template>
<script>
  export default {
    name: 'refundList',
    props: {
      id: {
        default: ''
      }
    },
    data() {
      return {
        listLoading: false,
        listQuery: {
          id: this.id,
          skuCode: '',
          pageNum: 1,
          pageSize: 10
        },
        list: [],
        listTotal: 0
      }
    },
    created() {
      this.getList();
    },
    methods: {
      getList() {
        this.listLoading = true;
        this.request({
          url: '/bsnl-merchant-bill/orderReturnCount/list',
          method: 'post',
          data: this.listQuery
        }).then(({data}) => {
          this.list = data.rows;
          this.listTotal = data.total;
          this.listLoading = false;
        }).catch(err => {
          console.log(err);
          this.list = [];
          this.listTotal = 0;
          this.listLoading = false;
        });
      },
      search() {
        this.listQuery.pageNum = 1;
        this.getList();
      },
      // 清空搜索条件
      resetForm(formName) {
        this.$nextTick(() => {
          this.$refs[formName].resetFields()
        })
      },
      handleSizeChange(value) {
        this.listQuery.pageSize = value;
        this.getList();
      },
      handleCurrentChange(val) {
        this.listQuery.pageNum = val;
        this.getList();
      }
    }
  }
</script>
